/** @type {HTMLCanvasElement} */
const canvas3 = document.getElementById('canvas3');
const ctx3 = canvas3.getContext('2d');


CANVAS_HEIGHT3 = canvas3.height = 800;
CANVAS_WIDTH3 = canvas3.width = 400;

const numberOfEnmies3 = 50;

let gameFrame3 = 0;
const enemiesArray3 = [];

class Enemy3 {
    constructor() {

        this.speed = Math.random() * 4 + 1;
        const image = new Image();
        image.src = './enemy3.png';
        this.image = image;

        this.spriteWidth = 218;
        this.spriteHeight = 177;
        this.width = this.spriteWidth /3;
        this.height = this.spriteHeight / 3;
        this.x = Math.random() * (canvas3.width - this.width);
        this.y = Math.random() * (canvas3.height - this.height);
        this.frame = 0;
        this.flapSeed = Math.floor(Math.random() * 3 + 1);
        this.angle = Math.random()*500;
        this.angleSpeed = Math.random()*0.2+0.5;
        this.curve = Math.random()*200 + 50;
    }
    update() {
        this.x =canvas3.width/2 * Math.sin(this.angle*Math.PI/90)+(canvas3.width/2-this.width/2);
        this.y = canvas3.height/2* Math.cos(this.angle*Math.PI/270)+(canvas3.height/2-this.height/2);
        this.angle = this.angle + this.angleSpeed;

        if (gameFrame3 % this.flapSeed === 0) {
            this.frame > 4 ? this.frame = 0 : this.frame++;
        }
    }
    draw() {
        ctx3.drawImage(this.image, this.frame * this.spriteWidth, 0, this.spriteWidth, this.spriteHeight, this.x, this.y, this.width, this.height)
    }
}

for (let i = 0; i < numberOfEnmies3; i++) {
    enemiesArray3.push(new Enemy3())
}


function animate3() {
    ctx3.clearRect(0, 0, CANVAS_WIDTH3, CANVAS_HEIGHT3);
    enemiesArray3.forEach(enemy => {
        enemy.update();
        enemy.draw();
    });
    gameFrame3++;
    requestAnimationFrame(animate3)
}

animate3();